<template>
    <div class="view">
        <Select v-model="SelectValue.province" style="width: 200px">
            <Option v-for="item in provinceList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <br /><br />

        <Select v-model="SelectValue.city" style="width: 200px">
            <Option v-for="item in cityList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <br /><br />

        <Select v-model="SelectValue.district" style="width: 200px">
            <Option v-for="item in districtList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <code>
            <pre
                >{{ this.SelectValue }}
            </pre>
        </code>
    </div>
</template>

<script>
import china from '../../assets/china.json'
let Mapping = {}
for (let i = 0; i < china.length; i++) {
    const element = china[i]
    Mapping[element.cityCode] = element
    if (element.children.length) {
        for (let y = 0; y < element.children.length; y++) {
            const child = element.children[y]
            Mapping[child.cityCode] = child
            if (child.children && child.children.length) {
                for (let d = 0; d < child.children.length; d++) {
                    const item = child.children[d]
                    Mapping[item.cityCode] = item
                }
            }
        }
    }
}
export default {
    data() {
        return {
            SelectValue: {
                province: '',
                city: '',
                district: ''
            },
            Mapping: Mapping,
            provinceList: china,
            cityList: [],
            districtList: []
        }
    },
    watch: {
        'SelectValue.province'(val) {
            this.cityList = this.Mapping[val].children
            this.SelectValue.city = ''
            this.SelectValue.district = ''
            this.districtList = []
        },
        'SelectValue.city'(val) {
            this.districtList = this.Mapping[val].children
            this.SelectValue.district = ''
        }
    }
}
</script>
<style lang="less" scoped>

</style>
